<template>
  <div class="UiTree">
    <TreeItem v-for="(item, index) in data"
              :key="index"
              @context="onItemContext"
              :data="item">
    </TreeItem>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, provide } from 'vue';
import { ProvideKey, TreeData } from './index';
import TreeItem from './tree-item.vue';

interface IProps {
  canDrag: Function,
  dragStart: Function,
  data: TreeData[],
}

export default defineComponent({
  name: 's-tree',
  components: { TreeItem },
  emits: ['context', 'item-dblclick'],
  props: {
    data: {
      type: Array as PropType<TreeData[]>,
      required: true,
      default() {
        return [];
      },
    },
    canDrag: {
      type: Function,
      default: () => {
        return true;
      },
    },
    dragStart: {
      type: Function,
      default: () => {},
    },
  },
  setup(props: IProps, { emit }) {
    provide(ProvideKey.CanDraggable, props.canDrag);
    provide(ProvideKey.DragStart, props.dragStart);
    provide(ProvideKey.DoubleClick, (data: TreeData) => {
      emit('item-dblclick', data);
    });
    return {
      onItemContext(event: MouseEvent, data: TreeData) {
        emit('context', event, data);
      },
    };
  },
});
</script>

<style scoped lang="scss">
.UiTree {

}
</style>
